<%--
  Created by IntelliJ IDEA.
  User: XTT
  Date: 2022/9/29
  Time: 20:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <style>
        body{
            background-color: rgb(242,242,242);
            padding: 15px;
        }
        .div-content{

            background-color: white;
            border-radius: 10px;
            padding: 15px;
        }
        fieldset{
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div class="div-content">
    <fieldset>
        <legend>搜索信息</legend>
        <form id="form-login" lay-filter="form-login-filter" class="layui-form layui-form-item layui-form-pane" method="get" action="">
            <div class="layui-inline">
                <label class="layui-form-label">用户姓名</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="clientName" lay-verify="clientName" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
<%--            <div class="layui-inline">--%>
<%--                <label class="layui-form-label">用户账号</label>--%>
<%--                <div class="layui-input-inline" style="width: 200px;">--%>
<%--                <input type="text" name="startDate" placeholder="用户账号" autocomplete="off" class="layui-input">--%>
<%--                </div>--%>
<%--            </div>--%>
            <div class="layui-inline">
                <button id="btn-search" type="button" lay-submit lay-filter="form-login-filter" class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search">搜索</button>
            </div>
        </form>
    </fieldset>
        <table id="table-client" lay-filter="table-client-filter">
        </table>
</div>
<script src="${pageContext.request.contextPath}/static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>

<script type="text/html" id="table-client-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
    </div>
</script>
<script type="text/html" id="cols-client-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="edit">编辑</button>
    </div>
</script>
<%--<script type="text/html" id="sexmapping">--%>
<%--    {{#--%>
<%--        if(d.sex=='男'){--%>
<%--        return 'M'--%>
<%--    }--%>
<%--    }}--%>
<%--</script>--%>
<script>


    function reflushTable(){
        $("#btn-search").click()
    }

    layui.use(['table','form'], function(){
        var table=layui.table;
        var form=layui.form;

        form.verify({
            clientName: function (value) {
                var reg = /^[\u4e00-\u9fa5]{0,4}$/;
                if (reg.test(value)) {
                    // return '身份证号格式正确';
                } else {
                    return '请输入正确的姓名格式';
                }
            }
        })

        //员工列表渲染
        table.render({
            elem: '#table-client'
            ,toolbar:'#table-client-toolbar'
            ,url: '${pageContext.request.contextPath}/client/list' //数据接口
            ,page: true //开启分页

            ,cols: [[ //表头
                {type: 'checkbox',width: 100},
                {field: 'clientId', title: '用户id', width:100, align: 'center'}
                ,{field: 'phone', title: '手机号码', width:250, align: 'center'}
                ,{field: 'idCard', title: '身份证', width:250, align: 'center'}
                ,{field: 'clientName', title: '用户姓名', width:250, align: 'center'}
                ,{title: '操作',width: 300,toolbar:'#cols-client-toolbar'}
            ]]
        });
        //监听表单提交
        form.on('submit(form-login-filter)', function(data){
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //刷新表格
            table.reload('table-client',{
                where: { //设定异步数据接口的额外参数，任意设
                    clientName: data.field.clientName
                    //…
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //触发事件
        table.on('toolbar(table-client-filter)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    //新增，打开新增窗口
                    var index = layer.open({
                        title: '添加用户',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: false,
                        area: ['35%', '40%'],
                        content: '${pageContext.request.contextPath}/client/add/ui',
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    break;
                case 'delete':
                    layer.confirm('您确认删除所选中的数据吗', {icon: 3, title:'警告'}, function(index){
                        var checkStatus=table.checkStatus('table-client')
                        var clientIdArr=new Array()
                        $(checkStatus.data).each(function () {
                            clientIdArr.push(this.clientId);
                        })
                        //异步删除请求
                        let url='${pageContext.request.contextPath}/client/delete/'+clientIdArr.join(',')
                        let params={
                            _method:"DELETE"
                        };
                        $.post(url,params,function (response) {
                            if (response.code==0){
                                //成功的提示
                                layer.msg('删除成功',{
                                    icon:1,
                                    time:2000 //2秒关闭 （如果不配置，默认是3秒）
                                },function () {
                                    //刷新表格
                                    reflushTable();
                                })
                            }else {
                                //错误的提示
                                alert("失败")
                            }
                        })
                        layer.close(index);
                    });
                    break;
            };
        });
        table.on('tool(table-client-filter)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            if (obj.event=='edit'){
                //修改，打开修改窗口
                var index = layer.open({
                    title: '修改用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: false,
                    area: ['35%', '40%'],
                    content: '${pageContext.request.contextPath}/client/update/'+data.clientId,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
        })
    });
</script>
</body>
</html>
